<template>
  <div class="updateChart">
    <!--轮播图Url-->
    <div class="urlBox">
      <div class="text">
        轮播图URL：
      </div>
      <div class="right">
        <Input
          prefix="ios-send"
          v-model="chartUrl"
          placeholder="输入轮播图 URL"/>
      </div>
    </div>

    <!--上传图片-->
    <div class="inputBox">
      <div class="style" @click="uploadFile">
        <!--图片样式-->
        <img src="../../assets/home/upload.png">
        <br>
        点我上传 【1200 × 400】
      </div>

      <!--图片预览-->
      <div class="preview">
        <img :src="fileInfo.fileUrl">
      </div>
    </div>


    <!--轮播图跳转URL-->
    <div class="webUrlBox">
      <div class="text">
        点击轮播图跳转URL：
      </div>
      <div class="right">
        <Input
          prefix="ios-send"
          v-model="webUrl"
          placeholder="点击轮播图跳转URL"/>
      </div>
    </div>

    <!--状态是否使用-->
    <div class="status">
    </div>

    <!---->
    <div class="submit">
      <Button size="default" type="success" @click="updateChart">修改</Button>
    </div>

  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        chartId: this.$route.query.cid,
        // 单个轮播图对象
        chartObj:{
          chartId:"",
          chartUrl:"",
          webUrl:"",
          showOrder:"",
          status:""
        },
        //轮播图Url
        chartUrl: "",
        //点击轮播图需要跳转的URL
        webUrl: "",
        //文件信息
        fileInfo: {
          file: Object,
          fileUrl: this.chartUrl,
          resp: Object
        }
      }
    },
    watch: {
      "chartUrl": function () {
        this.fileInfo.fileUrl = this.chartUrl
      }
    },
    methods: {
      //上传文件，调用File组件
      uploadFile: function () {
        this.Bus.$emit("my-event-file-upload", {
          fromComponent: "updateChart"
        })
      },
      //校验轮播图URL
      checkChartUrl: function () {
        if (this.chartUrl == "") {
          this.$Notice.error({
            title: "轮播图URL",
            desc: "URL或者图片至少需要一个"
          })
          return false
        }
        return true;
      },
      //校验调换URL
      checkWebUrl: function () {
        if (this.webUrl == "") {
          this.$Notice.error({
            title: "跳转URL不能为空",
          })
          return false;
        }
        return true;
      },
      //新增轮播图
      updateChart: function () {
        let b1 = this.checkChartUrl();
        let b2 = this.checkWebUrl();
        if (!b1 || !b2) {
          return false;
        }

        let data = {
          chartUrl: this.chartUrl,
          webUrl: this.webUrl,
        }
        this.axios.put(`/chart/chart/chart/${this.chartId}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "修改成功",
              })
              //跳转
              this.$router.push("/chart");
            }
          })
      },
      //查询详细信息
      init: function () {
        this.axios.get(`/chart/chart/chart/${this.chartId}`)
          .then((resp) => {
            if (resp.data.flag) {
              this.chartObj = resp.data.data
              this.chartUrl = this.chartObj.chartUrl
              this.webUrl = this.chartObj.webUrl
            }
          })
      }
    },
    mounted() {
      this.init();
      //文件上传，监听回传
      this.Bus.$on("my-event-file-updateChart", (data) => {
        this.fileInfo.file = data.file
        this.fileInfo.fileUrl = data.fileUrl
        this.fileInfo.resp = data.resp
        //如果上传成功，输入框URL默认填充网络URL
        this.chartUrl = this.fileInfo.fileUrl
      })
    },
  }
</script>

<style scoped>
  .updateChart {
    width: 100%;
    height: 100%;
  }

  /*轮播图URL盒子*/
  .updateChart .urlBox {
    overflow: hidden;
    padding: 20px 0px 15px;
  }

  /*轮播图URL文字*/
  .updateChart .urlBox .text {
    width: 100px;
    margin-left: 15px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    float: left;
  }

  /*轮播图URL输入框*/
  .updateChart .urlBox .right {
    width: calc(80% - 100px);
    margin-left: 5px;
    float: left;
  }


  /*轮播图跳转URL盒子*/
  .updateChart .webUrlBox {
    overflow: hidden;
    margin-top: 50px;
  }

  /*轮播图跳转URL文字*/
  .updateChart .webUrlBox .text {
    width: 162px;
    margin-left: 15px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    float: left;
  }

  /*轮播图跳转URL输入框*/
  .updateChart .webUrlBox .right {
    width: calc(80% - 162px);
    margin-left: 5px;
    float: left;
  }


  .updateChart .inputBox {
    overflow: hidden;
  }

  /*轮播图上传*/
  .updateChart .inputBox .style {
    margin: 20px 0px 20px 15px;
    width: 300px;
    height: 120px;
    border: 1px dotted #3399FF;
    border-radius: 6px;
    font-size: 16px;
    color: #FF0000;
    text-align: center;
    float: left;
  }

  /*预览*/
  .updateChart .inputBox .preview {
    margin: 20px 10px 20px 10px;
    width: 300px;
    height: 120px;
    border-radius: 6px;
    float: right;
  }

  /*img属性*/
  .updateChart .inputBox .preview img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }

  /*上传图片样式*/
  .updateChart .inputBox .style img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 5px auto 0px;
  }

  /*保存按钮*/
  .updateChart .submit {
    margin: 15px 0px 0px 15px;
  }
</style>
